<style>
    *{padding:0px;margin:0px;}
    html,body{
        height:100%;
        background-color: #000;
    }
    .blood{
        width: 200px;
        height: 20px;
        border: solid #fff 1px;
        border-radius: 2px;
    }
    .blood>span{
        height:20px;
        display: inline-block;
        background-color: red;
    }
</style>

<body>
    <div class="blood"><span style="width: 200px;"></span></div>
</body>

<script>
     var t1 = setInterval(function(){
        var spanObj = document.querySelector('.blood>span');
        var spanwidth = parseInt(spanObj.style.width);
        spanwidth -= 2;
        spanObj.style.width = spanwidth + 'px';
        if(spanwidth<=0){
         alert('你输了')
        clearInterval(t);
        clearInterval(t1);
        document.body.onclick = null;
          }
     }, 1000);
    

    function random(min,max) {
        return Math.floor(Math.random()*(max-min+1)+min)
    }

    var t = setInterval(function(){
        var imgObj = document.createElement('img'); 
        imgObj.src ="./../3-JS-1（EVENT下  事件委托、星星消消乐/3-代码/star.gif"
        imgObj.width = random(40,60);
        imgObj.height = random(40,60);
        imgObj.style.position = 'absolute';
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth)-imgObj.width;
        imgObj.style.left = random(0,maxLeft) + "px";
        var maxTop = (window.innerHeight || document.documentElement.clientWidth)-imgObj.width;
        imgObj.style.top = random(0,maxTop)+'px';
        document.body.appendChild(imgObj);
    }, 1000);

    document.body.onclick = function (event) {
        var e = event || window.event
        var target = e.target || e.srcElement
        if (target.nodeName=='IMG'){
            document.body.removeChild(target)
        }
    }
 
</script>



